<template>
  <div class="app-container">

    <el-row :gutter="20">
      <el-col :span="8">
        <el-form label-width="80px" :model="formLabelAlign">
          <el-form-item label="名称">
            <el-input v-model="formLabelAlign.name"></el-input>
          </el-form-item>
          <el-form-item label="海报">
            <el-upload
              class="avatar-uploader"
              :action="uploadurl"
              :with-credentials="true"
              :show-file-list="false"
              accept="image/*"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="img" :src="img" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>

          <el-form-item label="针对班级">
            <el-select style="display: inline-block" size="small" v-model="formLabelAlign.cid" placeholder="修改题型">
              <el-option
                v-for="item in classroomlist"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>          </el-form-item>
          <el-form-item label="开始时间">
            <el-date-picker
              v-model="formLabelAlign.createtime"
              type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
           </el-form-item>
          <el-form-item label="结束时间">
            <el-date-picker
              v-model="formLabelAlign.endtime"
              type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="题目">
            <div v-for="(item,index) in questions" :key="item.message">
              <div v-if="item.type==1">
                <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <el-input v-model="item.question">
                      <template slot="prepend">选择题：</template>
                    </el-input>
                    <el-input v-model="item.score">
                      <template slot="prepend">分值：</template>
                    </el-input>
                    <el-select style="display: inline-block" size="mini" v-model="item.type" placeholder="修改题型">
                      <el-option
                        v-for="item in questiontype"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                    <el-button style="float: right; padding: 3px 0" type="text" @click="removequestion(index)">删除</el-button>
                  </div>
                  <el-radio-group v-model="item.realanswer">
                    <el-row class="radioitem" v-for="answer in item.options"
                            :key="answer.value"
                    >
                      <el-radio
                        :label="answer.value"
                        :value="answer.value">
                        {{ answer.value }}：
                        <el-input
                          type="textarea"
                          :rows="2"
                          size="mini"
                          v-model="answer.label"></el-input>
                      </el-radio>
                    </el-row>

                  </el-radio-group>
                </el-card>
              </div>
              <div v-if="item.type==2">
                <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <el-input v-model="item.question">
                      <template slot="prepend">判断题：</template>
                    </el-input>
                    <el-input v-model="item.score">
                      <template slot="prepend">分值：</template>
                    </el-input>
                    <el-select style="display: inline-block" size="mini" v-model="item.type" placeholder="修改题型">
                      <el-option
                        v-for="item in questiontype"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                    <el-button style="float: right; padding: 3px 0" type="text" @click="removequestion(index)">删除</el-button>
                  </div>
                  <el-radio-group v-model="item.answer">
                    <el-row class="radioitem" v-for="answer in panduantitype"
                            :key="answer.value"
                    >
                      <el-radio
                        :label="answer.value"
                        :value="answer.value">
                        {{ answer.value }}：
                        <el-input
                          type="textarea"
                          :rows="2"
                          size="mini"
                          v-model="answer.label"></el-input>
                      </el-radio>
                    </el-row>

                  </el-radio-group>
                </el-card>
              </div>
              <div v-if="item.type==3">
                <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <el-input v-model="item.question">
                      <template slot="prepend">多选题：</template>
                    </el-input>
                    <el-input v-model="item.score">
                      <template slot="prepend">分值：</template>
                    </el-input>
                    <el-select style="display: inline-block" size="mini" v-model="item.type" placeholder="修改题型">
                      <el-option
                        v-for="item in questiontype"
                        :key="item.label"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                    <el-button style="float: right; padding: 3px 0" type="text" @click="removequestion(index)">删除</el-button>
                  </div>
                  <el-checkbox-group  v-model="item.multianswer" >
                    <el-row class="radioitem"
                            v-for="answer in item.options"
                            :key="answer.value"
                    >
                      <el-checkbox
                        :label="answer.value"
                        :value="answer.value"
                        >
                        {{ answer.value }}：
                        <el-input
                          type="textarea"
                          :rows="2"
                          size="mini"
                          v-model="answer.label"></el-input>
                      </el-checkbox>
                    </el-row>

                  </el-checkbox-group>
                </el-card>
              </div>
              <div v-if="item.type==4">
                <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <el-input v-model="item.question">
                      <template slot="prepend">简答题：</template>
                    </el-input>
                    <el-input v-model="item.score">
                      <template slot="prepend">分值：</template>
                    </el-input>
                    <el-select style="display: inline-block" size="mini" v-model="item.type" placeholder="修改题型">
                      <el-option
                        v-for="item in questiontype"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                    <el-button style="float: right; padding: 3px 0" type="text" @click="removequestion(index)">删除</el-button>
                  </div>
                  <el-input rows="5" type="textarea" v-model="item.answer"></el-input>
                </el-card>
              </div>
            </div>
            <el-button class="el-button--success" @click="doaddquestion">添加题目</el-button>
          </el-form-item>


          <el-form-item label="总分">
            {{totalscore}}
          </el-form-item>
          <el-form-item label="操作">
            <el-button class="el-button--success" @click="doadd">添加</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>


  </div>
</template>

<script>
import {addQuestion, getClassRoomList,addPaper } from '@/api/teacher'
import { Message } from '_element-ui@2.3.4@element-ui'

export default {
  data() {
    return {
      img :undefined,
      questiontype: [
        {
          label: '选择题',
          value: 1
        }, {
          label: '判断题',
          value: 2
        }, {
          label: '多选题',
          value: 3
        }, {
          label: '简答题',
          value: 4
        }
      ],
      panduantitype: [
        {
          label: '正确',
          value: 'A'
        }, {
          label: '错误',
          value: 'B'
        }
      ],
      uploadurl:"http://localhost:8080/upload/upload",
      imageUrl: '',
      questions: [],
      step: 0,
      list: null,
      listLoading: true,
      formLabelAlign: {
        img:undefined,
        question:[],
      },
      listQuery:{
        currentpage:1,
        pagesize:20,
        name:"",
        total:0,
      },
      classroomlist: [],
      teacherlist:[],
    }
  },

  created() {
    this.getClassList()
  },
  computed: {
    totalscore() {
      var score = 0;
      this.questions.forEach(item => {
        score += parseInt(item.score)
      })
      this.formLabelAlign.totalscore = score;
      return score;
    }
  },
  methods: {
    doaddquestion() {
      this.questions.push({
        type: 1,
        question: '如何成功勾引到女朋友的注意？',
        score: 5,
        answer: 'A',

        multianswer :[],
        options: [
          {
            value: 'A',
            label: '摸摸她的头'
          }, {
            value: 'B',
            label: '亲她一下'
          }, {
            value: 'C',
            label: '扇她一耳光'
          }, {
            value: 'D',
            label: '揍她一顿 '
          }
        ]
      })
    },
    removequestion(e) {
      console.log(e)
      this.questions.splice(e,1)
    },
    saveQuest (index){

      var item = {};
      if ( this.questions[index]  )
      {
        item = this.questions[0]
      }else {
        this.donextaddpaper();
        return;
      }

      item.answer1 = item.options[0]
      item.answer2 = item.options[1]
      item.answer3 = item.options[2]
      item.answer4 = item.options[3]
      if(item.type==3){
        item.answer = JSON.stringify(item.multianswer)
      }
      addQuestion(item).then(res=>{
        this.formLabelAlign.question.push(res.info)
        this.saveQuest(index+=1)
        console.log(res)
      })
    },
    getClassList() {
      this.listLoading = true
      getClassRoomList(this.listQuery).then((response) => {
        this.classroomlist = response.info
        this.listLoading = false
      }).catch(err => {
        this.$notify({
          title: '失败',
          message: '添加失败！',
          type: 'error'
        })
      })
    },

    doadd() {
      console.log(this.questions)
      console.log(this.formLabelAlign)
      this.listLoading = true
      this.saveQuest(0)

    },
    donextaddpaper () {
      console.log("start add paper")
      addPaper(this.formLabelAlign).then((response) => {
        this.$notify({
          title: '成功',
          message: '添加成功！',
          type: 'success'
        })
        this.listLoading = false
      }).catch(err => {
        this.$notify({
          title: '失败',
          message: '添加失败！',
          type: 'error'
        })

      })
    },

    handleAvatarSuccess(res, file) {
      console.log(res)
      console.log(file)
      this.img = URL.createObjectURL(file.raw);
      this.formLabelAlign.img = res.info
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG、JPG、PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    next() {
      if (this.step++ > 2) this.step = 0
    }
  }
}
</script>
<style type="text/css" scoped>
.radioitem {
  margin: 10px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
